<%@ page import="org.gnomus.server.Context" %>
<%@ page import="java.util.List" %>
<%@ page import="org.gnomus.data.group" %>
<%@ page import="org.gnomus.util.json" %>
<%@ page import="org.gnomus.data.member" %>
<%@ page import="org.gnomus.data.assignment" %>
<%@ page import="org.gnomus.server.C" %>
<%@ page import="java.util.Map" %>
<%
  List<group> groups = (List<group>) Context.get().data.get("groups");
%>
<jsp:include page="/WEB-INF/jsp/common/_head.jsp"></jsp:include>
<body style="opacity:0;">
<style type="text/css">
    div#menu {
        padding : 8px;
        background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(184,212,222,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
        background: linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#00b8d4de',GradientType=0 ); /* IE6-9 */
    }
</style>
<script type="text/javascript">

  $(document).ready(function() {
    teach = new Teach(<%= json.encode(groups) %>);
    teach.start();
  });

/*
  function deleteMember(i) {
    if (confirm("Are you sure you want delete this member?")) {
      updateMembers();
      groups.selected.members[i].active = false;
      editMembers();
    }
  }

  function getActiveMembers() {
    var members = groups.selected.members;
    var active = [];
    for (var i = 0; i < members.length; i++) {
      if (members[i].active) {
        active.push(members[i]);
      }
    }
    return active;
  }

  function deleteGroup() {
    if (confirm("Are you sure you want to delete this group?")) {
      $.ajax({
        url : "/teach/delete_group?id=" + groups.selected.id,
        type : "post",
        success : function() {
          window.location.reload(true);
        }
      })
    }
  }
*/
</script>
<div id="menu">
  <%
    if (groups.size() > 0) {
  %>
  <select id="group" class="zoom-200"></select>
  <%
    } else {
  %>
  <button onclick="teach.group.create();">Create new group</button>
  <%
    }
  %>
</div>
<div id="teach" class="tabs">
  <div class="p-absolute" style="right:6px;top:6px;">
    <button onclick="window.location.href = '/';">Home</button>
    <button onclick="window.location.href = '<%= Context.get().us.createLogoutURL("/") %>'">Sign Out</button>
  </div>
  <ul>
    <li><a href="#members">Members</a></li>
    <li><a href="#assignments">Assignments</a></li>
  </ul>
  <div id="members">
    <div id="member_list">
      This group has no members.
    </div>
    <%
      if (groups.size() > 0) {
    %>
    <br />
    <div class="a-center">
      <button id="edit_members" class="d-none" onclick="teach.members.edit()">Edit Members</button>
      <button id="save_changes" class="d-none" onclick="teach.members.save()">Save Changes</button>
      <button onclick="teach.members.add()">Add Member</button>
<%--
      <button onclick="teach.deleteGroup()">Delete Group</button>
--%>
    </div>
    <%
      }
    %>
  </div>
  <div id="assignments">
    <div id="assignment_list">
      This group has no assignments.
    </div>
    <%
      if (groups.size() > 0) {
    %>
    <br />
    <div class="a-center">
<%--
      <button onclick="editAssignments();">Edit Assignments</button>
--%>
      <button onclick="teach.assignments.create();">Create New Assignment</button>
    </div>
    <%
      }
    %>
    <div id="create_assignment" class="dialog" style="display:none;">
      <table style="width:100%;height:100%">
        <tr>
          <td class="a-center">
            <select>
              <%
                for (Map.Entry<String, String> me : C.assignments.entrySet()) {
              %>
                  <option value="<%= me.getKey() %>"><%= me.getValue() %></option>
              <%
                }
              %>
            </select>
          </td>
          <td class="a-center">
            <button onclick="teach.assignments.create2();">Create</button>
          </td>
        </tr>
      </table>
    </div>
    <div id="show_assignment"></div>
    <div id="create_group" class="d-none">
      <table style="width:100%;height:100%;">
        <tr>
          <td class="zoom-125">
            Group name :
          </td>
          <td>
            <input class='name' type='text' style="width:100%;height:24px;padding:4px;">
          </td>
          <td>
            <button class='f-right'>Create</button>
          </td>
        </tr>
        <tr class="min_length d-none">
          <td colspan="3" class="a-center">Name must be at least 4 characters long</td>
        </tr>
      </table>
    </div>
  </div>
</div>
<%
  if (groups.size() == 0) {
%>
<hr />
<div style="zoom:150%;text-align:center;">
  Welcome to the 'Teach' console. First thing to do here is to
  <button style="zoom:0.67;" onclick="teach.group.create();">Create new group</button>.
</div>
<%
  } else {
    group grp = groups.get(0);
    List<member> mbrs = (List<member>) grp.get("members");
    List<assignment> ants = (List<assignment>) grp.get("assignments");
    if (mbrs.size() == 0) {
%>
<hr />
<div style="zoom:150%;text-align:center;">
  Good, you've created your first group.
  <br />
  <br />
  Add some members to the group and don't forget to save the changes.
</div>
<%
    } else if (ants.size() == 0) {
%>
<hr />
<div style="zoom:150%;text-align:center;">
  Good, you've got a group with at least one member. Time to create an assignment.
  <br />
  <br />
  Click the 'Assignments' tab at the top and click 'Create new assignment'.
</div>
<%
    } else {
%>
<hr />
<div style="zoom:150%;text-align:center;">
  Almost done! Click on your assignment to get your access code(s).
  <br />
  <br />
  Once you've got an access code, go to the
  <button style="zoom:67%;" onclick="window.location.href = '/lab';">Access Code</button> page to get started.
  <br />
  <br />
  Return here to check the status of your assignment.
</div>
<%
    }
  }
%>
</body>
